<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 400px;
            height: 200px;
            margin: 10px auto;
        }

        .box .nowtime {
            width: 400px;
            height: 100px;
            position: relative;
        }

        .box .nowtime span {
            width: 50px;
            height: 100px;
            position: absolute;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            color: #fff;
            z-index: 999;
        }

        .updatatime {
            width: 400px;
            position: relative;
            height: 100px;
            background-color: #000;
            border-radius: 10px;
        }

        .box .updatatime span {
            width: 50px;
            height: 100px;
            position: absolute;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            color: #ffffff;
            /*top:0px;*/
        }
    </style>
</head>
<body>
<div class="box">
    <div class="nowtime">
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
    </div>
    <div class="updatatime">
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
    </div>
</div>

</body>
</html>
<script src="jquery.js"></script>
<script>

    //让nowtime时间做动画
    var $nowtimespans = $(".nowtime span");
    var $updatatimespans = $(".updatatime span");
    setInterval(function () {
        movenowtimespans();
        $.each($nowtimespans,function (i) {
            if($nowtimespans.eq(i).html()!==$updatatimespans.eq(i).html()){
                $nowtimespans.eq(i).animate({
                    top:100,
                },200);
                $updatatimespans.eq(i).animate({
                    top:100,
                },200,function () {
                    //当设置不动的时间updatatime做动画结束时的回调函数（将nowtime的时间与updatatime的时间同步，将两个时间瞬间返回原来的位置）
                    $updatatimespans.eq(i).html($nowtimespans.eq(i).html());
                    $updatatimespans.eq(i).css("top","0px");
                    $nowtimespans.eq(i).css("top","0px");
                })
            }
        });
    }, 1000);

function movenowtimespans(){
    $nowtimespans.each(function (index, element) {
        $(element).css("left", 50 * index);
        $(element).html(getlocaltime()[index]);

    });
}

    moveupdatatimespan();//让updatatime不动
  function moveupdatatimespan() {
      $updatatimespans.each(function (index, element) {
          $(element).css("left", 50 * index);
          $(element).html(getlocaltime()[index]);
      });
  }
    // 获取当前的时间
    function getlocaltime() {
        var data = new Date();
        var hour = formattingtime(data.getHours());
        var min = formattingtime(data.getMinutes());
        var sec = formattingtime(data.getSeconds());
        var str = hour + ":" + min + ":" + sec;
        return str.split("");
    }

    //格式化时间
    function formattingtime(time) {
        return time = time < 9 ? "0" + time : time;
    }

</script>